<template>
	<view class="root">
		<checkbox-group @change="setAgree" class="checkbox-group">
			<checkbox  style="transform: scale(0.8);" />
			<text>同意</text>
		</checkbox-group>
		<template v-for="(agreement,index) in agreements">
			<text class="agreement" @click="navigateTo(agreement)">{{agreement.title}}</text>
			<text class="hint" v-if="hasAnd(agreements,index)">和</text>
		</template>
	</view>
</template>

<script>
	import Globalunit from "../../common/globalunit.js";
	export default {
		name: "uni-agreements",
		computed:{
			agreements(){
				return Globalunit.agreements||[]
			}
		},
		data() {
			return {
				isAgree:false,
			}
		},
		methods: {
			navigateTo({
				url,
				title
			}) {
				uni.navigateTo({
					url: '/pages/common/webview/webview?url=' + url + '&title=' + title,
					success: res => {},
					fail: () => {},
					complete: (e) => {
						console.log("e: ",e);
					}
				});
			},
			hasAnd(agreements,index){
				return agreements.length-1>index
			},
			setAgree(e){
				this.isAgree = !this.isAgree
				this.$emit('setAgree',this.isAgree)
			}
		}
	}
</script>

<style>
	* {
		display: flex;
	}

	.root {
		width:750rpx;
		align-items: center;
		justify-content: center;
		flex-direction: row;
		font-size: 28rpx;
		color: #8a8f8b;
		position: absolute;
		bottom: 20px;
		left:0px;
	}

	.agreement {
		color: #9f7fc0;
	}
	.hint{
		font-size: 28rpx;
		color: #8a8f8b;
	}
</style>
